.time-range-picker {
	.time-picker {
		&:hover {
			.clear-icon {
				opacity: 1;
			}
		}

		:global {
			.rc-time-picker-input {
				width: 8rem;
				height: 2.25rem;
			}
		}

		.time-icon {
			position: absolute;
			right: 0.5rem;
			height: 2.25rem;
			color: var(--color-5);
		}

		.clear-icon {
			position: absolute;
			right: 1.75rem;
			height: 2.25rem;
			color: var(--color-text-2);
			cursor: pointer;
			opacity: 0;

			&:hover {
				color: var(--color-5);
			}
		}
	}
}
